import React from 'react'
import styles from './index.module.scss'
import { Flex } from 'antd-mobile'
import classNames from 'classnames'
import PropTypes from 'prop-types'

// 本FilterFooter组件, 支持事件的绑定
// onCancel 取消按钮被点击
// onSubmit 确认按钮被点击
class FilterFooter extends React.Component {
  static propTypes = {
    cancelText: PropTypes.string,
    confirmText: PropTypes.string,
  }
  static defaultProps = {
    cancelText: '取消',
    confirmText: '确认',
  }
  // 封装一个这样的底部组件, 底部的两个按钮, 肯定是要能够点的
  // 而这两个按钮做的事情, 应该是传递进来的
  render() {
    const {
      className,
      cancelText,
      confirmText,
      onCancel,
      onSubmit,
      style,
    } = this.props
    return (
      <Flex
        className={classNames(styles['filter-footer'], className)}
        style={style}
      >
        {/* 取消按钮 */}
        <span className="btn cancel" onClick={onCancel}>
          {cancelText}
        </span>
        {/* 确定按钮 */}
        <span className="btn ok" onClick={onSubmit}>
          {confirmText}
        </span>
      </Flex>
    )
  }
}

export default FilterFooter
